<template>
	<view class="">
		<view class="swiper" v-animate-on-scroll>
		  <u-swiper :list="datalist.banners" :height="500"></u-swiper>
		</view>
		<view class="content">
			<view
				class="coupon_item" 
			>
				<view class="coupon_left">
					<view class="logo">
						<image :src="'https:' + (datalist.iconUrl || datalist.shopIconUrl)" mode=""></image>
					</view>
					<view class="ifom">
						<view class="name">{{datalist.title}}</view>
						<view class="dibs">
							<view class="price">
								<text>￥</text>
								{{datalist.price}}
							</view>
							<view class="yh">{{datalist.tags[0] == '满减券' ? `满 ${datalist.useThreshold} 元可用` : (datalist.tags[0] == '代金券' ? `${datalist.price}抵${datalist.couponValue}代金券` : '')}}</view>
						</view>
						<view class="period">
							有效期到：{{datalist.effectEnd}}
						</view>
						<view class="btn" @click="buyCoupon(datalist.id)" v-if="!type">购买</view>
					</view>
				</view>
			</view>
			<view class="purchase">
				<view class="title">购买须知</view>
				<view class="u-content">
				  <u-parse :html="datalist.usageNote"></u-parse>
				</view>
			</view>
		</view>
		<Butogin :zheshow='zheshow' @colse="(e)=> zheshow = false"/>
	</view>
</template>

<script>
	import { createOrder } from '@/core/api/index.js'
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				datalist:{},
				zheshow:false,
				type:0
			}
		},
		onLoad(r) {
			  let datas = JSON.parse(decodeURIComponent(r.itme))
			 if (datas && datas.banners && Array.isArray(datas.banners)) {
			    datas.banners = datas.banners.map(url => {
			      // 确保每个URL都以https开头
			      if (url && !url.startsWith('http')) {
			        return 'https:' + url
			      }
			      return url
			    })
			  }
			  this.datalist = datas
			  // this.datalist = data
			this.type = r.type
			console.log(this.datalist)
		},
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		methods:{
			async buyCoupon(id){
				if(!this.userInfo.phone) return this.zheshow = true
				uni.showLoading({
					title:'订单确认中...'
				})
			    const result = await createOrder(id)	
				console.log(result)
				uni.hideLoading()
				if(result.code == '00000'){
					this.$store.dispatch('user/getUserinfo')
					uni.navigateTo({
						url:'/pages/coupon/confirmation?data=' + encodeURIComponent(JSON.stringify(result.data))
					})
				}else{
					uni.showToast({
						title: result.message || '购买失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>
<style>
page {
  background-color: #F8F8F8;
}
</style>
<style lang="scss">
	.content{
		margin: 30rpx 30rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		.coupon_item{
			padding: 40rpx 0rpx;
			border-bottom: 1rpx solid #eaeaea;
			display: flex;
			position: relative;
			.coupon_left{
				display: flex;
				.logo{
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
					image{
						width: 100%;
						border-radius: 10rpx;
						height: 100%;
					}
				}
				.ifom{
					margin-left: 20rpx;
					.name{
						font-size: 30rpx;
						font-weight: 700;
						width: fit-content;
						position: relative;
					}
					.pup_tpye{
						font-size: 20rpx;
						background-color: #FADFCF;
						color: #f98c50;
						position: absolute;
						padding: 5rpx 15rpx;
						    top: 5%;
						        right: -96rpx;
					}
					
					.dibs{
						display: flex;
						align-items: center;
						margin: 10rpx 0;
						.price{
							font-size: 42rpx;
							color: #EC691C;
							font-weight: 700;
							text{
								
								font-size: 30rpx;
							}
						}
						.yh{
							margin-left: 10rpx;
							color: #757575;
						}
					}
				}
			}
			.period{
				color: #999999;
				font-size: 26rpx;
			}
			.btn{
				background-color: #F26B2E;
				width: 108rpx;
				height: 48rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 47rpx;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				right: -4%;
				transform: translate(-10%,-50%);
				top: 50%;
				margin-right: 20rpx;
			}
		}
		.purchase{
			min-height: 500rpx;
			padding: 30rpx 0;
			.title{
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
			.u-content{
				line-height: 43rpx;
				font-size: 26rpx;
				padding-left: 7rpx;
				color: #828282;
			}
		}
	}
</style>